<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Token Calculator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
        }
        #drop-zone {
            border: 2px dashed #ccc;
            border-radius: 20px;
            width: 100%;
            height: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
        #drop-zone.dragover {
            background-color: #f0f0f0;
        }
        #file-input {
            display: none;
        }
        #result {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>Image Token Calculator</h1>
    <div id="drop-zone">
        <p>Drop an image here or click to select</p>
    </div>
    <input type="file" id="file-input" accept="image/*">
    <div id="result"></div>

    <script>
        const dropZone = document.getElementById('drop-zone');
        const fileInput = document.getElementById('file-input');
        const result = document.getElementById('result');

        dropZone.addEventListener('click', () => fileInput.click());
        dropZone.addEventListener('dragover', (e) => {
            e.preventDefault();
            dropZone.classList.add('dragover');
        });
        dropZone.addEventListener('dragleave', () => dropZone.classList.remove('dragover'));
        dropZone.addEventListener('drop', handleDrop);
        fileInput.addEventListener('change', handleFileSelect);

        function handleDrop(e) {
            e.preventDefault();
            dropZone.classList.remove('dragover');
            const file = e.dataTransfer.files[0];
            if (file && file.type.startsWith('image/')) {
                processImage(file);
            }
        }

        function handleFileSelect(e) {
            const file = e.target.files[0];
            if (file) {
                processImage(file);
            }
        }

        function processImage(file) {
            const img = new Image();
            img.onload = () => calculateTokens(img.width, img.height);
            img.src = URL.createObjectURL(file);
        }

        function calculateTokens(width, height) {
            const tileSize = 224;
            const horizontalTiles = Math.ceil(width / tileSize);
            const verticalTiles = Math.ceil(height / tileSize);
            const totalTiles = horizontalTiles * verticalTiles;
            const tokenCost = totalTiles * 1000;

            result.innerHTML = `
                <h2>Results:</h2>
                <p>Image dimensions: ${width}x${height} pixels</p>
                <p>Horizontal tiles: ${horizontalTiles}</p>
                <p>Vertical tiles: ${verticalTiles}</p>
                <p>Total tiles: ${totalTiles}</p>
                <p>Token cost: ${tokenCost.toLocaleString()} tokens</p>
            `;
        }
    </script>
</body>
</html>
